<template>
  <div class="import">
    <el-card>
      <h3>批量导入</h3>
      <myexcel :beforeUpload="beforeUpload" :onSuccess="onSuccess"></myexcel>
    </el-card>
  </div>
</template>

<script>
import { importEmployeesApi } from "@/api/employees";
export default {
  methods: {
    // 上传之前的逻辑
    beforeUpload(file) {
      // 判断文件的大小是否小于 2M
      // 文件的大小转换单位：
      //  b kb mb gb tb
      // 1024b = 1kb 1024kb = 1mb 1024mb = 1gb 1024gb = 1tb
      const less2M = file.size < 2 * 1024 * 1024;
      if (!less2M) {
        this.$message.error("文件大小不过超过 2M");
      }
      return less2M;
    },
    // 将日期从天转换为日期
    formData(days) {
      // 得到天对应的时间戳
      const mytimer = (days - 1) * 24 * 60 * 60 * 1000;
      // 根据时间戳得到具体的日期
      const myDate = new Date(mytimer);
      // 将日期减去 70 年
      myDate.setFullYear(myDate.getFullYear() - 70);
      return myDate;
    },
    // 成功后的回调函数
    async onSuccess({ header, results }) {
      // 将数据的中的中文属性改为英文属性
      // 得到中文属性对应的英文属性
      const obj = {
        入职日期: "timeOfEntry",
        姓名: "username",
        工号: "workNumber",
        手机号: "mobile",
        转正日期: "correctionTime"
      };
      // 将数据中的所有的中文属性改为英文属性
      const newArr = results.map(item => {
        // 创建一个新的对象
        const newObj = {};
        // 遍历键 Object.keys(obj)：['入职日期', '姓名', '工号', '手机号', '转正日期']
        Object.keys(obj).forEach(subitem => {
          // subitem 对应是 ['入职日期', '姓名', '工号', '手机号', '转正日期']中的每个元素
          // obj[subitem] 对应是 timeOfEntry & username & workNumber & mobile & correctionTime
          // 将英文属性添加到 newObj 中
          // const key = obj[subitem];
          // const value = item[subitem];
          // newObj[key] = value;
          if (subitem === "入职日期" || subitem === "转正日期") {
            newObj[obj[subitem]] = this.formData(item[subitem]);
          } else {
            newObj[obj[subitem]] = item[subitem];
          }
        });
        return newObj;
      });
      // 将得到的数据提交到服务器
      await importEmployeesApi(newArr);
      // 提示成功
      this.$message.success("批量导入成功");
      // 跳转到员工页面
      this.$router.push("/employees");
    }
  }
};
</script>

<style lang="scss">
.import {
  margin: 20px;
  h3 {
    text-align: center;
  }
}
</style>